import React, { PureComponent } from 'react';
import { Input, Form, Tag } from 'antd';
import url from 'url';
import querystring from 'querystring';
import { connect } from 'dva';
import styles from './index.less';
import { searchNew7, searchTaobaoShop } from '../../services/tool';
import * as formRender from '../../utils/formRender';

const FormItem = Form.Item;
const { TextArea } = Input;

@connect(state => ({
  // ShopNmae: state.auction.ShopNmae,
}))

export default class MerchantTag extends PureComponent {
  state = {
    tagsValue: '',
    errMsg: '',
    nick: '',
  }
  componentWillReceiveProps = async (nextProps) => {
      const { dispatch, props, children } = this.props
      const auctionIds = formRender.extractAuctionIds(children);
      const merchants = [];
      for (let i = 0; i < auctionIds.length; i ++) {
        const result = await searchNew7({ text: `https://item.taobao.com/item.htm?id=${auctionIds[i]}` });
        if (result.data && result.data[0]) {
          const urlObj = url.parse(result.data[0].shopLink);
          const query = querystring.parse(urlObj.query);
          const result1 = await searchTaobaoShop(query);
          if (result1 && result1.title && !merchants.find(item => item.title === result1.title)) {
            merchants.push(result1); 
          }
      }
    }
    const merchant_tags = merchants.map(item => item.title);
    if ( merchants && merchants.length > 0 ) {
      console.log(merchants);
      if (this.props.onChange) this.props.onChange(merchant_tags);
    }
  }
  handleInputFocus = async () => {
    const { dispatch, props, children } = this.props
    const auctionIds = formRender.extractAuctionIds(children);
    const merchants = [];
    for (let i = 0; i < auctionIds.length; i ++) {
      const result = await searchNew7({ text: `https://item.taobao.com/item.htm?id=${auctionIds[i]}` });
      if (result.data && result.data[0]) {
        const urlObj = url.parse(result.data[0].shopLink);
        const query = querystring.parse(urlObj.query);
        const result1 = await searchTaobaoShop(query);
        if (result1 && result1.title && !merchants.find(item => item.title === result1.title)) {
          merchants.push(result1); 
        }
      }
    }
    const merchant_tags = merchants.map(item => item.title);
    if ( merchants && merchants.length > 0 ) {
      console.log(merchants);
      if (this.props.onChange) this.props.onChange(merchant_tags);
    }
  }
  handleChangeTags = (e) => {
    const { props } = this.props;
    this.setState({
      nick: e.target.value,
    });
    if (props.value.find(item => item === e.target.value)) {
      this.setState({
        errMsg: '不能添加重复的tag!'
      });
    } else if (e.target.value.length < props.minLength || e.target.value.length > props.maxLength) {
      this.setState({
        errMsg: `标签的字数范围必须${props.minLength}~${props.maxLength}`,
      });
    } else {
      this.setState({
        errMsg: ''
      });
    }
  }
  handleConfirmTags = () => {
    const { props } = this.props;
    const { nick, errMsg } = this.state;
    if (nick && nick.trim().length > 0) {
      if (!errMsg) {
        if (this.props.onChange) this.props.onChange([ ...props.value, nick ]);
        this.setState({
          nick: '',
        });
      }
    }
  }
  handleCloseTags = (e, removedTag) => {
    e.preventDefault();
    const { props } = this.props;
    const advantage = props.value.filter(tag => tag !== removedTag);
    if (this.props.onChange) this.props.onChange(advantage);
  }
  render() {
    const { props, value } = this.props;
    return (
      <div style={{ display: 'none', padding: '10px 20px 0' }}>
        <label className={styles.pointBox}>
              <Input
                // ref={this.saveInputRef}
                type="text"
                style={{ fontSize: 14, width: 150, border: 'none', marginTop: 3 }}
                onChange={this.handleChangeTags}
								onPressEnter={this.handleConfirmTags}
								// onFocus={this.handleInputFocus}
                placeholder="选择标签或输入标签"
              />
        </label>
      </div>
    );
  }
}